<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>操作用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/index.js"></script>

    <style>
        @import "css/element.css";
        @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
        @font-face {
            font-family: element-icons;
            src: url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf) format("truetype");
            font-weight: 400;
            font-style: normal;
        }
    </style>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">BLOGS管理</a>
            <a>
              <cite>操作用户</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div id="app">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
						<div class="layui-inline layui-show-xs-block">
								<input type="text" placeholder="请输入用户名" id="userName"
									autocomplete="off" class="layui-input">
							</div>
							
							
							<div class="layui-inline layui-show-xs-block">
								<button class="layui-btn" lay-submit="" lay-filter="sreach" type="button" @click="getUserList()">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
                    </form>
                </div>



                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form" id="admin-article">
                        <thead>
                        <tr>
                            <th>
                               编号
                            </th>
                            <th>
                           用户名
                            </th>
                            <th>
                            用户电话
                            </th>
                             <th>
                               用户状态          
                            </th>
                            <th>
                                操作
                            </th>
                        </tr>
                        </thead>
                        
                        
						<tbody>
                        <tr  v-for="(item, index) in userArr" :key="user">
                            <th>
                                {{item.userId}}
                            </th>
                            <th>
                                {{item.userName}}
                            </th>
                            <th>
                                {{item.userPhone}}
                            </th>
                            <th>
                                {{item.userStatus}}
                            </th>
                            <th>
                                <a title="编辑" href="javascript:alert('不准点');" class="ml-5" style="text-decoration:none">
                                <i class="layui-icon">&#xe642;</i>
                                </a>

                                <a id="delete" title="删除(禁用)" href="javascript:alert('沙比？');" style="text-decoration:none">
                                <i class="layui-icon">&#xe640;</i>
                                </a>

                                <a style="text-decoration:none" :id="item.userId" @click="userUpdate(item.userId, item.userStatus)" href="javascript:;" title="改变状态">
                                <i class="layui-icon">&#xe601;</i>
                                </a>
                                <input type="hidden" :value=item.userStatus />
                            </th>
                        </tr>

                        </tbody>
                    </table>
                </div>

<!-- 分页 -->
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="this.page.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                    </el-pagination>
                </div>

             <!--      app-->
         </div>
  </div>

            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                userArr: [],
                page: "",
                pageNum: 1,
                pageSize: 5,
                userName :"",
                currentPage: 1,
                urlDown: "../downloadFileFromQiniu?fileName="
            }

        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = `${val}`;
                this.userName = $("#userName").val();
                this.getUserList();
            },
            handleCurrentChange(val) {
                this.pageNum = `${val}`;
                this.userName = $("#userName").val();
                this.getUserList();
            },

            getUserList(){
               pageSize=$("#layui-laypage-2 select").val();
                this.userName = $("#userName").val();
                $.ajax({
                    async:true,
                    type:"get",
                    url:"../../user/back/manage",
                    data:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        userName:this.userName
                    },
                    dataType:"json"
                }).done((result)=>{
                    if(result.data.list!=null){
                        this.userArr = result.data.list;
                        this.page = result.data;
                    }
                }).fail(()=>{
                    alert("失败了");
                })
            },
            userUpdate(userId, userStatus) {
                $.ajax({
                    async:true,
                    type:"get",
                    url:"../../user/update/manage",
                    data:{
                        userId: userId,
                        status : userStatus
                    },
                    dataType:"json"
                }).done((result)=>{
                    if(result.data!=null){
                        this.getUserList();
                    }
                }).fail(()=>{
                    alert("失败了");
                })
            }
        },
        //页面加载先执行
        async mounted(){
            await this.getUserList();
        }

    });
</script>

<script>
    // export default {
    //     methods: {
    //         handleSizeChange(val) {
    //             console.log(`每页 ${val} 条`);
    //         },
    //         handleCurrentChange(val) {
    //             console.log(`当前页: ${val}`);
    //         }
    //     },
    //     data() {
    //         return {
    //             currentPage: 1
    //         };
    //     }
    // }
    // function userUpdate(userId) {
    //     alert("111");
    //     $.ajax({
    //         async:true,
    //         type:"put",
    //         url:"../../user/back/manage",
    //         data:{
    //             userId: userId
    //         },
    //         dataType:"json"
    //     }).done((result)=>{
    //         if(result.data!=null){
    //             alert("修改成功");
    //         }
    //     }).fail(()=>{
    //         alert("失败了");
    //     })
    // }
</script>
</html>